<template>
  <div class="accountManage">
    <!--账号管理---------面包屑-->
    <a-breadcrumb style="text-align: left;font-size: 16px;margin-left: 15px;margin-bottom: -10px">
      <a-breadcrumb-item>首页</a-breadcrumb-item>
      <a-breadcrumb-item>APP管理</a-breadcrumb-item>
      <a-breadcrumb-item>反馈管理</a-breadcrumb-item>
    </a-breadcrumb>
    <!--账号管理---------分割线-->
    <a-divider/>
    <!--账号管理---------新增表单-->
    <div class="btn">
      <div class="right">
        <a-input-search style="width: 200px" @search="onSearch"/>
      </div>
    </div>
    <!--系统管理---------账号数据列表-->
    <a-table :columns="columns" :data-source="data" :loading="loadFlag" :pagination="false" :bordered="true">
      <span slot="opinion_img" slot-scope="text, record">
        <!--<img :src="record.opinion_img" alt="" style="width: 120px;height: 70px;">-->
        <div class="demo-image__preview">
          <el-image
            style="width: 120px; height: 100px"
            :src="record.opinion_img"
            :preview-src-list="[record.opinion_img]"
          />
        </div>
      </span>
    </a-table>
    <!--系统管理---------分页器-->
    <div class="pagination">
      <a-locale-provider :locale="zhCN">
        <a-pagination
          v-model="pageIndex"
          :total="total"
          :show-total="total => `共 ${total} 条数据`"
          :page-size="pageSize"
          @showSizeChange="onShowSizeChange"
          @change="pageChange"
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-if="props.value === '50'">全部</span>
          </template>
        </a-pagination>
      </a-locale-provider>
    </div>
  </div>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale-provider/zh_CN'
import {getOpinion} from '../http/api'

const columns = [
  {
    title: '序号',
    dataIndex: 'opinion_id',
    align: 'center',
    width: 10
  }, {
    title: '反馈信息',
    dataIndex: 'opinion_content',
    align: 'center',
    width: 150
  }, {
    title: '反馈图片',
    dataIndex: 'opinion_img',
    scopedSlots: {customRender: 'opinion_img'},
    align: 'center',
    width: 30
  }, {
    title: '联系方式',
    dataIndex: 'opinion_phone',
    align: 'center',
    width: 30
  }
  // , {
  //   title: '处理状态',
  //   dataIndex: 'opinion_status',
  //   scopedSlots: {customRender: 'isDisable'},
  //   align: 'center',
  //   width: 30
  // }
]
const data = []

export default {
  inject: ['reload'],
  data() {
    return {
      // 表格加载判断
      loadFlag: false,
      // 表格字段
      columns,
      data,
      // 搜索框文本
      searchValue: '',
      // 组件汉化
      zhCN,
      // 分页器数据
      total: 0,
      pageIndex: 1,
      pageSize: 2
    }
  },
  methods: {
    // 获取账号数据
    async getOpinion() {
      await getOpinion({
        searchValue: this.searchValue,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      }).then(res => {
        this.data = res.data.data
        this.total = res.data.total
        // 加载动作
        setTimeout(() => {
          this.loadFlag = false
        }, 100)
      })
    },
    // 获取到搜素框输入的文本，在调用 getAccountList() 重新查询账号信息
    onSearch(value) {
      this.searchValue = value
      this.$message.success('查询成功')
      this.getOpinion()
    },
    // 分页函数-点击换页函数
    pageChange(current, pageSize) {
      this.pageIndex = current
      this.pageSize = pageSize
      this.getOpinion()
    },
    // 分页函数-每页显示条目函数
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize
      this.getOpinion()
    }
  },
  created() {
    this.loadFlag = true
    this.getOpinion()
  }
}
</script>
<style lang="less" scoped>
.right {
  text-align: right;
  margin: 15px 20px;
}

.pagination {
  margin: 15px 20px;
  text-align: right
}
</style>
